<template>
  <PageWrapper :contentClass="`m-0.5`" :contentFullHeight="true" :fixedHeight="true">
    <a-row style="height: 100%" type="flex" :gutter="[5]" align="top">
      <a-col :span="8" style="height: 100%">
        <div style="height: 100%; background-color: #fff" class="p-2 divide-y divide-500">
          <div class="h-5/6 flex justify-between">
            <div style="flex: 5" class="overflow-y-scroll">
              <a-list item-layout="horizontal" :data-source="cuisines.selectedCuisineList">
                <template #renderItem="{ item }">
                  <a-list-item
                    :class="cuisines.cuisine.uuId === item.uuId ? 'selected-background' : ''"
                    @click="onClickIndexCuisine(item)"
                  >
                    <div class="flex flex-col w-full" style="width: fill-available">
                      <a-space direction="vertical">
                        <a-row style="width: 100%">
                          <a-col :span="14">{{ item.name }}</a-col>
                          <a-col :span="5">x{{ item.number }}</a-col>
                          <a-col :span="5">￥{{ item.money }}</a-col>
                        </a-row>
                        <a-row>
                          <div style="width: 100%" v-if="item.specsName"
                            >规格：{{ item.specsName }}</div
                          >
                          <div style="width: 100%" v-if="item.practiceName"
                            >做法：{{ item.practiceName }}</div
                          >
                        </a-row>
                      </a-space>
                    </div>
                  </a-list-item>
                </template>
              </a-list>
            </div>
            <div style="flex: 1" class="ml-2 flex flex-col gap-y-2">
              <div class="flex flex-col">
                <a-button type="primary" @click="handAddNumber">+</a-button>
                <a-input addon-before="￥" size="large" v-model:value="cuisines.cuisine.number" />
                <a-button type="primary" @click="handSubtractNumber">-</a-button>
              </div>
              <a-button type="primary" @click="handleCuisineSpecs">规格</a-button>
              <a-button type="primary" @click="handleCuisinePractice">做法</a-button>
              <a-button type="primary" @click="handleRemarkEdit">单品备注</a-button>
              <!--              <a-button type="primary">加料</a-button>-->
              <a-button type="primary" @click="handleMoneyEdit">修改价格</a-button>
              <!--              <a-button type="primary">赠送</a-button>-->
              <a-button type="primary" @click="handDeleteCuisine">删除</a-button>
              <a-button type="primary" @click="clearSelected">清台</a-button>
            </div>
          </div>

          <div class="h-1/6 flex justify-evenly items-center">
            <a-button size="large" type="text" danger>总数量：{{ totalNumber }}</a-button>
            <a-button size="large" type="text" danger>总金额：￥{{ totalMoney }}</a-button>
            <a-button size="large" @click="affirmOrder">下单</a-button>
          </div>
        </div>
      </a-col>
      <a-col :span="16" class="h-full">
        <Cuisine :cuisines="cuisines" />
      </a-col>
    </a-row>
    <MoneyEditModal @register="registerMoneyEditModal" />
    <RemarkEditModal @register="registerRemarkEditModal" />
    <CuisineSpecsModal @register="registerCuisineSpecsModal" />
    <CuisinePracticeModal @register="registerCuisinePracticeModal" />
  </PageWrapper>
</template>

<script lang="ts">
  import { useMessage } from '/@/hooks/web/useMessage';
  import { SelectedCuisine } from './index.data';
  import { defineComponent, onMounted, computed, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { OrderMeal } from './types/CuisineOrder';
  import { insertAffirmOrder } from '/@/api/order/cuisineOrder';
  import Cuisine from './components/Cuisine/Index.vue';
  import MoneyEditModal from './modules/MoneyEditModal.vue';
  import RemarkEditModal from './modules/RemarkEditModal.vue';
  import CuisineSpecsModal from './modules/CuisineSpecsModal.vue';
  import CuisinePracticeModal from './modules/CuisinePracticeModal.vue';
  import { useModal } from '/@/components/Modal';

  export default defineComponent({
    name: 'Index',
    components: {
      Cuisine,
      PageWrapper,
      MoneyEditModal,
      RemarkEditModal,
      CuisineSpecsModal,
      CuisinePracticeModal,
    },
    setup() {
      onMounted(() => {
        // fetch({});
      });

      const totalMoney = computed(() => {
        let totalMoney = cuisines.selectedCuisineList.reduce(
          (totalMoney, item) => item.money + totalMoney,
          0
        );
        return Math.floor(totalMoney * 100) / 100;
      });

      const totalNumber = computed(() => {
        return cuisines.selectedCuisineList.length || 0;
      });

      const cuisines = reactive({
        orderMeal: new OrderMeal(),
        selectedCuisineList: new Array<SelectedCuisine>(),
        cuisine: {} as SelectedCuisine,
      });

      function onClickIndexCuisine(indexCuisineParam: SelectedCuisine) {
        cuisines.cuisine = indexCuisineParam;
      }
      function handDeleteCuisine() {
        let l = cuisines.selectedCuisineList.filter((item) => {
          return item.uuId != cuisines.cuisine.uuId;
        });
        cuisines.selectedCuisineList.length = 0;
        cuisines.selectedCuisineList.push(...reactive<Array<SelectedCuisine>>(l));
      }

      function handAddNumber() {
        cuisines.cuisine.number++;
      }
      function handSubtractNumber() {
        if (cuisines.cuisine.number === 1) {
          return;
        }
        cuisines.cuisine.number--;
      }
      const clearSelected = () => {
        cuisines.orderMeal = new OrderMeal();
        cuisines.selectedCuisineList = new Array<SelectedCuisine>();
        cuisines.cuisine = new SelectedCuisine();
      };

      // 规格
      const [registerCuisineSpecsModal, { openModal: openCuisineSpecsModal }] = useModal();
      function handleCuisineSpecs() {
        let cuisine = cuisines.cuisine;
        openCuisineSpecsModal(true, {
          record: cuisine,
        });
      }
      // 做法
      const [registerCuisinePracticeModal, { openModal: openCuisinePracticeModal }] = useModal();
      function handleCuisinePractice() {
        let cuisine = cuisines.cuisine;
        openCuisinePracticeModal(true, {
          record: cuisine,
        });
      }
      const [registerMoneyEditModal, { openModal: openMoneyEditModal }] = useModal();
      function handleMoneyEdit() {
        let cuisine = cuisines.cuisine;
        openMoneyEditModal(true, {
          record: cuisine,
          isUpdate: true,
        });
      }

      const [registerRemarkEditModal, { openModal: openRemarkEditModal }] = useModal();
      function handleRemarkEdit() {
        let cuisine = cuisines.cuisine;
        openRemarkEditModal(true, {
          record: cuisine,
          isUpdate: true,
        });
      }

      const { notification, createErrorModal } = useMessage();

      //下单方法
      const affirmOrder = async () => {
        try {
          let { orderMeal, selectedCuisineList } = cuisines;
          orderMeal.totalNumber = totalNumber.value;
          orderMeal.totalMoney = totalMoney.value;
          orderMeal.orderCuisineList = selectedCuisineList;
          console.log(orderMeal);
          await insertAffirmOrder(orderMeal);
          notification.success({
            message: '下单成功',
            duration: 3,
          });
          clearSelected();
        } catch (e) {
          console.error(e);
          createErrorModal({
            title: '下单失败',
          });
        }
      };
      return {
        cuisines,
        onClickIndexCuisine,
        handDeleteCuisine,
        handAddNumber,
        handSubtractNumber,
        clearSelected,
        affirmOrder,
        totalMoney,
        totalNumber,
        registerMoneyEditModal,
        handleMoneyEdit,
        registerRemarkEditModal,
        handleRemarkEdit,
        registerCuisineSpecsModal,
        handleCuisineSpecs,
        registerCuisinePracticeModal,
        handleCuisinePractice,
      };
    },
  });
</script>

<style lang="less" scoped>
  /deep/ .ant-list-grid .ant-col > .ant-list-item {
    margin-bottom: 0;
  }

  .selected-background {
    background-color: #e4e4e7;
  }
</style>
